<template>
  <div class="order">
    <Header>提交订单</Header>
    <section>
        <div class="path">
            <h3 class="path-title">收货信息：</h3>
            <div class="path-content-true" v-show="addressList.length"  @click="goPath">
                <div>
                    <span>{{path.name}}</span>
                    <span>{{path.tel}}</span>
                </div>
                <div>
                    <span>{{path.province}}</span>
                    <span>{{path.city}}</span>
                    <span>{{path.county}}</span>
                    <span>{{path.addressDetail}}</span>
                </div>
                <i class="iconfont">&#xe65f;</i>
            </div>
            <div class="path-content-false" v-show="!addressList.length" @click="goPath">
                <div><van-icon name="plus" />添加地址</div>
                <i class="iconfont">&#xe65f;</i>
            </div>
        </div>
        <div class="payment">
            <h3 class="payment-title">支付方式:</h3>
            <van-radio-group  v-model="radio" class="pay">
                <div><van-radio name="zfb" icon-size="0.43rem" checked-color="#b0352f" >支付宝</van-radio></div>
              
            </van-radio-group>
        </div>
        <div class="goods">
            <ul>
                <li v-for="(item,index) in goodsChecked" :key="index">
                    <div class="goods-img">
                        <img :src="item.goods_imgUrl" alt="">
                    </div>
                    <div class="goods-content">
                        <h4>{{item.goods_name}}</h4>
                        <div class="goods-price">
                            <b>￥{{item.goods_price}}</b>
                            <span>x{{item.goods_num}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>  
        <div class="tips" v-show="tipsStatus">
            <div class="tips-content">
                <i class="iconfont">&#xe61f;</i>
                <span>此订单24小时内未付款会自动关闭</span>
            </div>
            <div class="close-tips" @click="tipsClose">
                <i class="iconfont">&#xe641;</i>
            </div>
        </div>
    </section>
    <footer>
        <div class="left">
            <span>
                共 <b>{{total.num}}</b> 件，
            </span>
            <span>
                总金额：<b>￥{{total.price.toFixed(2)}}</b>
            </span>
        </div>
        <div class="right" @click="goPayment">
            提交订单
        </div>
    </footer>
  </div>
</template>

<script>
import Header from '@/components/order/Header.vue'
import { mapGetters, mapMutations, mapState } from 'vuex'
 //引入axios的二次封装
 import http from '@/common/api/request.js'
import { Toast ,Dialog,Notify } from 'vant'
//引入qs序列化数据
import qs from 'qs'
export default {
    name:'Order',
    components:{
        Header,
    },
    data(){
        return{
            tipsStatus:true,//是否显示提示框
            radio:'zfb',//单选框选定的值
            path:'',//结算页面显示的收货地址
        }
    },
    computed:{
        //选中商品的总计、默认地址
        ...mapGetters(['total','defaultPath','goodsChecked']),
        //选中的商品、收货地址
        ...mapState({
            //用户选中的商品
            selectList:state=>state.cart.selectList,
            //用户的默认地址
            addressList:state=>state.path.addressList,
            //用户的订单号
            orderList:state=>state.order.orderList
        })
        
    },
    created(){      
        //发送请求（查询默认地址）
        //判断是否是从地址页面回来的 如果是则让页面显示的地址为点击的地址
        if(!this.$route.query.path){
            http.$axios({
                url:'/api/selectAddress',
                headers:{
                    token:true
                }
            }).then(res=>{
                //使用vuex中mutation的方法存储用户地址至state中的addressList
                this.initAddress(res.data)
                //有默认地址
                if(this.defaultPath.length){
                    this.path = this.defaultPath[0]
                }else{
                    //如果用户没有地址 则跳转至添加地址页面
                    if(!res.data.length){
                        Dialog.confirm({
                        message: '您还没有填写地址',
                        confirmButtonText:'去填写'
                        })
                        .then(() => {
                            // 确认
                            this.$router.push('/path')
                        })
                        .catch(() => {
                            // 取消
                            
                        });
                        return
                    }
                    // //没有默认地址 就为第一个地址
                    this.path =res.data[0]   
                }
            })
        //发送请求（查询订单）
        http.$axios({
            url:'/api/selectOrder',
            method: 'POST',
            data:{
                orderId:this.orderList
            },
            headers:{
                token:true
            }
        }).then(res=>{
            console.log(res)
        })
        }else{
            this.path = JSON.parse(this.$route.query.path)
        }
       
    },
    methods:{
        //定义存储地址方法
        ...mapMutations(['initAddress']),
        //关闭提示框
        tipsClose(){
            this.tipsStatus = false
        },
        //提交订单
        goPayment(){
            //如果用户没有填写地址
            if(this.path ==''){
                Notify({ type: 'danger', message: '您还没有填写地址 ' });
            } 
            
            //发送请求 ==> 1.修改订单状态 2.删除购物车数据
            http.$axios({
                url:'/api/submitOrder',
                method:'POST',
                headers:{
                    token:true,
                },
                data:{
                    orderId:this.orderList,//订单号
                    shopArr:this.goodsChecked//购物车选中的数据
                }
            }).then(res=>{
                //如果修改订单状态成功且删除了购物车数据 则发送请求（去支付）
                if(res.success){
                    //去支付
                    let goodsName = []
                    //遍历用户选中的商品 并且构造一个商品名的数组
                    this.goodsChecked.forEach(v=>{
                        goodsName.push(v.goods_name)
                    })
                    //需要给支付 传递的参数
                    let dataOrder= {
                        orderId:this.orderList,//用户订单
                        name:goodsName.join(''),//商品名
                        price:this.total.price.toFixed(2),//商品总价格
                    }
                    http.$axios({
                        url:'/api/payment',
                        method: 'POST',
                        headers:{
                            token:true,
                            'Content-Type':'application/x-www-form-urlencoded'//一定要写
                        },
                        //qs是增加安全性的序列化
                        data:qs.stringify(dataOrder)
                    }).then(res=>{
                        //res需要返回的是支付宝的地址 然后前端打开后端传递的url地址
                        if(res.success){
                            //打开支付宝页面
                            window.location.href=res.paymentUrl
                        }
                        console.log(res)
                    })
                }
                console.log(res)
            })
            
        },
        //选择收货地址
        goPath(){
            this.$router.push({
                name:'path-index',
                //向地址页面传值，在地址页面判断是从哪个页面进来的
                query:{
                    type:'select'
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
section::before{
    content: '';
    position: fixed;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #f5f5f5;
}
section{
    margin:(44 / @rootsize) 0 ;
    .path{
        .path-title{
            padding:(10 /@rootsize) (15 / @rootsize);
            font-size: (14 / @rootsize);
            font-weight: 400;
        }
        .path-content-true{
            position: relative;
            padding: (8 /@rootsize) (15 / @rootsize);
            width: 100vw;
            font-size: (12 / @rootsize);
            background-color: #fff;
            span{
                padding: 0 (3 / @rootsize);
            }
            div{
                padding: (2 / @rootsize) 0;
            }
            i{
                position: absolute;
                right: (10 / @rootsize);
                top:(20 / @rootsize);
                color: #ccc;
            }
        }
        .path-content-false{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: (15 /@rootsize) (15 / @rootsize);
            width: 100vw;
            font-size: (16 / @rootsize);
            background-color: #fff;
            div{
                display: flex;
                align-items: center;
                .van-icon{
                font-size: (25 / @rootsize);
                margin-right: (13 / @rootsize);
                color: #fff;
                background-color: #b0352f;
                }
            }
            i{
                    color: #ccc;
            }
           
        }
    }
    .payment{
        margin: (10 /@rootsize) 0;
        padding: 0 0 (10 /@rootsize);
        width: 100vw;
        font-size: (12 / @rootsize);
        background-color: #fff;
        .payment-title{
            padding:(10 /@rootsize) (15 / @rootsize);
            font-size: (14 / @rootsize);
            font-weight: 400;
        }
        .pay{
            display: flex;
            padding: 0 (15 /@rootsize);
            div{
                margin-right: (10 / @rootsize);
            }

        }
        
    }
    .goods{
        margin: (5 /@rootsize) 0;
        padding: (5 /@rootsize) (15 /@rootsize);
        width: 100vw;
        font-size: (12 / @rootsize);
        background-color: #fff;
       ul{
        li{
            display: flex;
            margin: (20 /@rootsize) 0;
            .goods-img{
                width: (75 / @rootsize);
                height: (75/ @rootsize);
                img{
                    width: (75 / @rootsize);
                    height: (75/ @rootsize);
                }
            }
            .goods-content{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                padding: 0 (15 / @rootsize);
                h4{
                    font-weight: 400;
                }
                .goods-price{
                    display: flex;
                    justify-content: space-between;
                    b{
                        color: #b0352f;
                    }
                }
            }
        }
       }
    }
    .tips{
        display: flex;
        align-items: center;
        position: fixed;
        bottom: (50 / @rootsize);
        left: 0;
        width: 100vw;
        height: (30 / @rootsize);   
        padding: 0 (15 / @rootsize);
        background-color: #ffffcc;
        color: #ff9900;
        span{
            font-size: (12 / @rootsize);
        }
        .tips-content{
            flex: 1;
            i{
                font-size: (14 / @rootsize);
                margin-right: (10 / @rootsize);
            }
        }
        .close-tips{
            width: (20 / @rootsize);
            i{
                font-size: (14 / @rootsize);
                
            }
        }
    }
}
footer{
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: (44 / @rootsize);
    border-top: 1px solid #ccc;
    background-color: #fff;
    font-size: (13 / @rootsize);
    z-index: 999;
    .left{
        flex: 1;
        padding-left: (15 / @rootsize);
        b{
            font-size: (16 / @rootsize);
            color: #b0352f;
        }
    }
    .right{
        width: (120 / @rootsize);
        height: 100%;
        background-color: #b0352f;
        color: #fff;
        text-align: center;
        line-height: (44 / @rootsize);
        font-size: (18 / @rootsize);
    }
}
</style>